<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <link rel="shortcut icon" href="/static/1.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Room Homepage</title>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <nav>
        <div class="nav-wrapper teal">
            <a href="#" class="brand-logo center">Homepage</a>
        </div>
    </nav>
    <div class="container">
        <div class="row"></div>
        <!--edit profile and logout-->
        <div class="row">
            <div class="col s6 offset-s3 ">
                <p id="username" class="flow-text">Welcome {{username}}!</p>
                <form class="col s12" method="post" action="{{ url_for('jpto_edit_profile') }}">
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Edit profile
                    </button>
                </form>
                <div class="row"></div>
                <form class="col s12" method="post" action="{{ url_for('logout') }}">
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Logout
                    </button>
                </form>
            </div>
        </div>
        <div class="row"></div>
        <!--select chatroom-->
        <div class="row">
            <div class="col s6 offset-s3 ">
                <h4>Select a Chat Room to Enter:</h4>
                <form class="col s12" method="post" action="{{ url_for('homepage_enter') }}">

                    <div class="input-field col s12">
                        <select id="selected_room" name="selected_room">
                            <option value="" disabled selected>Select your Room</option>
                            {% for room in all_rooms %}
                            <option value="{{ room }}">{{ room }}</option>
                            {% endfor %}
                        </select>
                        <label>Room Selection</label>
                    </div>
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Enter Room
                    </button>
                </form>
            </div>
        </div>
        <!--create chatroom-->
        <div class="row">
            <div class="col s6 offset-s3 ">
                <h3>OR</h3>
                <h4>Create a Chat Room:</h4>
                <form class="col s12" method="post" action="{{ url_for('homepage_create') }}">
                    <div class="row">
                        <div class="input-field col s12">
                            <input value="" id="roomname" type="text" class="validate" name="roomname">
                            <label class="active" for="roomname">Enter a Room Name</label>
                        </div>
                    </div>

                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Create Room
                    </button>
                </form>
            </div>
        </div>
    </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        /*dropdown selection initiallize*/
        $(document).ready(function () {
            $('select').formSelect();
        });
    </script>
</body>

</html>